<section class="container">
  <%= render(
    OverviewView,
    "_details.html",
    token: @token,
    counters_path: @counters_path,
    tags: @tags,
    conn: @conn
  ) %>

  <section data-page="token-holders-list" id="holders">
    <div class="card">
      <%= render OverviewView, "_tabs.html", assigns %>
      <!-- Token Holders -->
      <div class="card-body" data-async-listing="<%= @current_path %>" data-no-self-calls>
        <%= render BlockScoutWeb.CommonComponentsView, "_channel_disconnected_message.html", text: gettext("Connection Lost") %>
        <h2 class="card-title list-title-description"><%= gettext "Token Holders" %></h2>

        <div class="list-top-pagination-container-wrapper">
          <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
        </div>

        <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
          <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
        </button>
        <div data-empty-response-message style="display: none;">
          <div class="tile tile-muted text-center">
            <span data-selector="empty-transactions-list">
              <%= gettext "There are no holders for this Token." %>
            </span>
          </div>
        </div>

        <div data-items>
          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
        </div>

        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

      </div>
    </div>
  </section>
  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/token-counters.js") %>"></script>
</section>
